<template>
	<view>
		<Head :goback_custom="true" @gobackCustomMethod="$emit('closePopout', mobile_original)">
			手机认证
		</Head>
		<view class="form_split_10"></view>
		<view class="notice_bar" v-if="mobile_original != ''">
			当前手机号已验证，修改手机后您的登录手机号将同步修改
		</view>
		<view class="log_wrapper">
			<view class="field_cell_group">
				<view class="field_cell">
					<input placeholder-style="color:#757575;font-size:14px !important;"  class="log_field" type="number" placeholder="请输入新手机号" v-model="newMobile" />
				</view>
				<view class="field_cell">
					<input placeholder-style="color:#757575;font-size:14px !important;"  class="log_field" type="number" placeholder="请输入验证码" v-model="code" />
					<button class="log_get_btn" @click="sendSms">
						{{ sendSmsBtnText }}
					</button>
				</view>
				<view class="btn_group">
					<u-button class="btn_mb" type="primary" shape="circle" @click="handleSubmit">
						提交
					</u-button>
				</view>
			</view>
		</view>
		<!-- <Captcha ref="captcha"></Captcha> -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import Captcha from '@/components/captcha/index'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'ResetMobile',
		props: ['mobile_original'],
		components: {
			Captcha
		},
		data() {
			return {
				checked: true,
				btnText: '获取验证码',
				btnDisabled: false,
				newMobile: '',
				code: '',
				regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/
			}
		},
		computed: {
			...mapState({
				sendSmsBtnText: state => state.sendSmsBtnText
			})
		},
		methods: {
			initCB() {},
			// 提交
			handleSubmit() {
				let that = this
				if (!this.newMobile) {
					this.$refs.uTips.show({
						title: '请填写手机号',
						type: 'error'
					})
					return false
				}
				if (!this.regularMobile.test(this.newMobile)) {
					this.$refs.uTips.show({
						title: '手机号格式不正确',
						type: 'error'
					})
					return false
				}
				if (this.newMobile === this.mobile_original) {
					this.$refs.uTips.show({
						title: '新手机号与原手机号相同',
						type: 'error'
					})
					return false
				}
				if (!this.code) {
					this.$refs.uTips.show({
						title: '请填写验证码',
						type: 'error'
					})
					return false
				}
				http
					.post(api.reset_mobile, {
						mobile: this.newMobile,
						code: this.code
					})
					.then(res => {
						if (res.data.code === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							this.$store.commit('setLoginState', {
								whether: that.$store.state.LoginOrNot,
								utype: that.$store.state.LoginType,
								token: that.$store.state.userToken,
								mobile: that.$store.state.userMobile,
								userIminfo: that.$store.state.userIminfo
							})
							setTimeout(() => {
								that.$emit('closePopout', this.newMobile)
							}, 1500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 发送验证码
			sendSms() {
				if (this.$store.state.sendSmsBtnDisabled) {
					return false
				}
				if (!this.newMobile) {
					this.$refs.uTips.show({
						title: '请输入手机号',
						type: 'error'
					})
					return false
				}
				if (!this.regularMobile.test(this.newMobile)) {
					this.$refs.uTips.show({
						title: '手机号格式不正确',
						type: 'error'
					})
					return false
				}
				if (this.mobile_original == this.newMobile) {
					this.$refs.uTips.show({
						title: '新手机号与旧手机号相同',
						type: 'error'
					})
					return false
				}
				this.$refs.captcha.show(res => {
					this.$store
						.dispatch('sendSmsFun', {
							url: api.sendsms_auth_mobile,
							mobile: this.newMobile,
							type: this.$store.state.LoginType,
							captcha: res
						})
						.then(response => {
							if (response.data.code == 200) {
								this.$refs.uTips.show({
									title: this.$store.state.sendSmsMessage,
									type: 'success'
								})
							} else {
								this.$refs.uTips.show({
									title: this.$store.state.sendSmsMessage,
									type: 'error'
								})
								return false
							}
						})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.split_bar {
		width: 100%;
		height: 18rpx;
		background-color: #f3f3f3;
	}

	.notice_bar {
		width: 100%;
		padding: 28rpx 0 28rpx 70rpx;
		font-size: 24rpx;
		color: #ff6600;
		background-image: url($ImgUrl + "remind_ico.svg");
		background-color: #fffbeb;
		background-position: 32rpx center;
		background-repeat: no-repeat;
		background-size: 32rpx;
		margin-bottom: 30rpx;
	}

	.log_wrapper {
		width: 646rpx;
		margin: 40rpx auto;
	}

	.tx1 {
		padding: 110rpx 0 96rpx;
		font-size: 52rpx;
		color: #333333;
	}

	.field_cell {
		width: 100%;
		border-bottom: 2rpx solid #eeeeee;
		margin-bottom: 42rpx;
		position: relative;
	}

	.log_field {
		border: 0;
		width: 100%;
		height: 100%;
		color: #333333;
		font-size: 30rpx;

		&::placeholder {
			color: #c9c9c9;
		}
	}

	.log_get_btn {
		position: absolute;
		right: 0;
		bottom: 0;
		border: 0;
		height: 100%;
		font-size: 30rpx;
		color: #c9c9c9;
		padding: 0;
		z-index: 20;
		background: #ccc;
		background-color: #ffffff;
	}
</style>
